<template>
  <div class="app-container search-table-box aidex-table">
    <el-tabs>
      <el-tab-pane label="进项系统配置">
        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>电子底账库</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form1" label-width="80px" label-position="left">
              <el-form-item label="进项平台:">
                <el-radio-group v-model="form.platCode">
                  <el-radio label="综合服务平台"></el-radio>
                  <el-radio label="税务数字账户"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">数电试点地区部分纳税人进项相关操作已由综服升级为税务数字账户，请根据企业实际情况配置</el-link>
              </div>
            </el-form>
            <el-divider></el-divider>
            <el-form ref="form3" label-width="80px" label-position="left">
              <el-form-item label="进项通道:">
                <el-row>
                  <el-col :span="5">
                    <el-radio-group v-model="form.isCert">
                      <el-radio label="0">CA软证书</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">CA软证书需进行相关申请流程审批后才可下载企业底账数据，税盘进项插盘即可使用</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>发票采集</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form2" label-width="80px" label-position="left">
              <el-form-item label="自动签收:">
                <el-row>
                  <el-col :span="5">
                    <el-checkbox v-model="form.isAutoSigin">启用</el-checkbox>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">启用后，上传采集或扫描采集时自动将采集状态的发票签收状态标记为已签收</el-link>
              </div>
            </el-form>
            <el-divider></el-divider>
            <el-form ref="form3" label-width="80px" label-position="left">
              <el-form-item label="自动查验:">
                <el-row>
                  <el-col :span="5">
                    <el-checkbox v-model="form.isAutoCheck">启用</el-checkbox>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">启用后，上传采集或扫描采集的发票将自动进行发票查验并根据查验结果从税局获取补全准确票面信息，执行后续入池流程</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>进项发票池</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form4" label-width="100px" label-position="left">
              <el-form-item label="业务方归属:">
                <el-row>
                  <el-col :span="5">
                    <el-checkbox v-model="form.isPart">启用</el-checkbox>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">启用后，上传采集/扫描采集的发票在上传前可选择对应需要关联的业务方，并支持在进项发票池展示及查询</el-link>
              </div>
            </el-form>
            <el-divider></el-divider>
            <el-form ref="form4" label-width="140px" label-position="left">
              <el-form-item label="自动更新拉取状态:">
                <el-row>
                  <el-col :span="5">
                    <el-checkbox v-model="form.isAutoUpdate">启用</el-checkbox>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">启用后，调用发票池查询接口成功查走发票后，系统会自动更新该批次发票的拉取状态为已拉取，也可选择查询成功后主动调用更新接口</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>报销管理</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form4" label-width="280px" label-position="left">
              <el-form-item label="允许员工提交报销发票的开票时间范围:">
                <el-row>
                  <el-col :span="5">
                    <el-radio-group v-model="form.platCode">
                      <el-radio label="不限制"></el-radio>
                      <el-radio label="按月份限制"></el-radio>
                    </el-radio-group>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">报销可根据发票的开票日期限制是否可以提交，可选择不限制或按月份限制，当按月限制时超过此时间范围外的发票将无法提交，如配置月份为2，则仅允许提交本月及上月的发票</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

      </el-tab-pane>

    </el-tabs>

    <!-- 编辑-公司-弹出查询 -->
    <el-dialog v-dialogDrag  :close-on-click-modal="false" title="设置数据访问权限" :visible.sync="userDialogOpen" width="900px" append-to-body>
      <div class="dialog_box" style="height:550px;">
        <el-form label-position="left" :model="userQueryParams" :inline="true"  ref="userQueryForm" label-width="88px" >
          <el-form-item  prop="userSearchValue">
            <el-input
              v-model="userQueryParams.searchValue"
              size="mini"
              placeholder="请输入用户名称"
              @keyup.enter.native="handlesiteCodeQuery"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUserQuery">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="userSelectLoading" :data="userList"
                  height="400"
                  stripe
                  ref="userTable"
                  :row-key="getUserListRowKey"
                  :row-style="{height:2+'px'}"
                  :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
                      }"
                  :cell-style="{padding:'4px 4px'}"
                  border>
          <el-table-column label="序号" type="index" align="center" width="55">
            <template slot-scope="scope">
              <span>{{(userQueryParams.pageNum - 1) * userQueryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <!-- 数据 -->
          <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
          <el-table-column prop="nickName" label="用户姓名" width="180"></el-table-column>
          <el-table-column prop="phonenumber" label="手机号码" ></el-table-column>
          <el-table-column label="数据范围" align="center" class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.rangeType">
                <el-radio label="0">由我创建</el-radio>
                <el-radio label="1">全部</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="userTotal>0"
          :total="userTotal"
          :page.sync="userQueryParams.pageNum"
          :limit.sync="userQueryParams.pageSize"
          @pagination="getUserList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="confirmUser">保 存</el-button>
        <el-button size="mini" @click="userCancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style lang="scss">
  .el-card__header .clearfix::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 13px;
    margin-top: 11px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

</style>

<script>

    import { listConfig, getConfig, delConfig, addConfig, updateConfig } from "@/api/inconfig/inconfig";

    import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";

    /* 城市列表 **/
    import { provinceList, cityList, districtList } from "@/api/system/city";

    export default {
        name: "Config",
        data() {
            return {
                advanced: false,
                tableHeight: this.getInitTableHeight(),
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 销项系统配置表格数据
                configList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    params:{

                    },
                    configId: null,
                    custId: null,
                    siteCode: null,
                    siteName: null,
                    channelCode: null,
                    channelName: null,
                    errorRanger: null,
                    errorRangerName: null,
                    fen: null,
                    authType: null,
                    authTypeName: null,
                    isCheck: null,
                    isCheckName: null,
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                },

                /* ======================================用户选择======================================  */
                userName: null,
                userTotal: 0,
                userList: [],
                userDialogOpen: false,
                userSelectLoading: false,
                userQueryParams: {
                    searchValue: null,
                    pageNum: 1,
                    pageSize: 20,
                },

                /* ======================================省市区======================================  */
                // 省
                provinceId: null,
                provinceList:[],
                // 市
                cityId: null,
                cityList:[],
                // 区
                districtId: null,
                districtList:[],

            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 行样式 */
            rowClass({ row, rowIndex }) {
                if (this.ids.includes(row.id)) {
                    return { background: "#d9edf7", height:'20px' };
                } else {
                    return { height:'20px'};
                }
            },
            /** 隐藏搜索按钮操作 */
            showSearchFun(isShowSearch){
                this.showSearch = isShowSearch
                let oldHeight = this.$refs.queryRef.$el.offsetHeight
                if(!isShowSearch){
                    //当前是显示状态
                    oldHeight = oldHeight + 12
                }else{
                    oldHeight = oldHeight - 12
                }
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 展开按钮操作 */
            toggleAdvanced() {
                const oldHeight = this.$refs.queryRef.$el.offsetHeight
                this.advanced = !this.advanced
                this.$nextTick(() => (
                    this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
                ))
            },
            /** 查询销项系统配置列表 */
            getList() {
                this.loading = true;
                listConfig(this.queryParams).then(response => {
                    this.configList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    configId: null,
                    custId: null,
                    siteCode: null,
                    siteName: null,
                    channelCode: null,
                    channelName: null,
                    errorRanger: null,
                    errorRangerName: null,
                    fen: null,
                    authType: null,
                    authTypeName: null,
                    isCheck: null,
                    isCheckName: null,
                    createBy: null,
                    createTime: null,
                    updateBy: null,
                    updateTime: null
                };
                this.resetForm("form");
            },


            /* ※※ 查询 省市区 相关方法 start ※※ */
            // 获取省
            getProvinceList(){
                provinceList().then(response => {
                    this.provinceList = response.data;
                });
            },
            // 获取市
            getCityList(){
                console.log(this.provinceId);
                cityList( {"parentId" : this.provinceId } ).then(response => {
                    this.cityList = response.data;
                });
            },
            // 获取区县
            getDistrictList(){
                districtList( {"parentId" : this.cityId } ).then(response => {
                    this.districtList = response.data;
                });
            },
            // 选中省份
            handleChangeProvince(val){
                // 给表单省字段赋值
                this.form.provinceid = val;
                let province = {};
                province = this.provinceList.find((item)=>{
                    return item.id === val;
                });
                this.form.province = province.name;
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getCityList();
            },
            // 清空省份
            handleClearProvince(){
                // 城市数据清空、区县数据清空;
                this.cityList = [];
                this.districtList = [];
                // 已选市、区数据清空
                this.cityId = null;
                this.districtId = null;
                // 表单城市、区县数据清空
                this.form.cityid = null;
                this.form.city = null;
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中城市
            handleChangeCity(val){
                // 给表单市字段赋值
                this.form.cityid = val;
                let city = {};
                city = this.cityList.find((item)=>{
                    return item.id === val;
                });
                this.form.city = city.name;
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
                // 获取城市数据
                this.getDistrictList();
            },
            // 清空省份
            handleClearCity(){
                // 区县数据清空
                this.districtList = [];
                // 已选区县清空
                this.districtId = null;
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },
            // 选中区县
            handleChangeDistrict(val){
                // 给表单省字段赋值
                this.form.areaid = val;
                let district = {};
                district = this.districtList.find((item)=>{
                    return item.id === val;
                });
                this.form.area = district.name;
            },
            // 清空省份
            handleClearDistrict(){
                // 表单区县清空
                this.form.areaid = null;
                this.form.area = null;
            },

            /* ※※ 查询 省市区 相关方法 end ※※ */




            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length!==1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加销项系统配置";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getConfig(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.title = "修改销项系统配置";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateConfig(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addConfig(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除销项系统配置编号为"' + ids + '"的数据项？').then(function() {
                    return delConfig(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('saleconfig/config/export', {
                    ...this.queryParams
                }, `config_${new Date().getTime()}.xlsx`)
            },
            /** 数据访问权限设置 */
            handleSettingAuth(){
                this.userCodeDialogOpen();
            },


            /* ※※ 设置用户 相关方法 start ※※ */
            /** ① 弹出编辑内容-公司代码 */
            userCodeDialogOpen(){
                this.userDialogOpen = true;
                this.getUserList();
            },
            /** ③ 行KEY **/
            getUserListRowKey(row) {
                return row.userId
            },
            /** ⑤ 点击查询按钮 **/
            handleUserQuery(){
                this.userQueryParams.pageNum = 1;
                this.getUserList();
            },
            /** ⑥ 查询 **/
            getUserList(){
                this.userSelectLoading = true;
                listUser(this.userQueryParams).then(response => {
                    this.userList = response.rows;
                    if(this.userList){
                        this.userList.forEach(user => {
                            user.rangeType = '1';
                        })
                    }
                    console.log(this.userList);
                    this.userTotal = response.total;
                    this.userSelectLoading = false;
                });
            },
            /** ⑦ 点击确认查询 **/
            confirmUser() {
                this.userCancel();
            },
            /** ⑧ 点击关闭查询弹出框 **/
            userCancel() {
                this.userDialogOpen = false;
            },
            /* ※※ 编辑 公司代码 相关方法 end ※※ */
        }
    };
</script>
